<script lang="ts" setup>
const list = []
</script>

<template>
  <div class="breadcrumb">
    <span>首页</span>
    <span>工作台</span>
  </div>
</template>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;

  span {
    display: block;
    color: rgb(150, 165, 249);
    font-family: '幼圆';
    font-weight: 900;
    animation: jump 1s;
    transform: translate(0px, 0);
    transition: .5s;
    margin-left: 20px;
    animation: appear .3s;

    &::before {
      content: '>';
      position: absolute;
      left: -13px;
    }

    &:first-child {
      margin-left: 0;
    }

    &:first-child::before {
      display: none;
    }

    &:last-child {
      font-weight: 500;
    }
  }

  @keyframes appear {
    0% {
      margin-left: 0px;
      opacity: 0;
    }

    100% {
      margin-left: 20px;
      opacity: 1;
    }
  }
}
</style>